<breadcrumb />

<mat-card>
  <mat-card-content>
    <section>
      <h2>Choose a date (e.g. choose your date of birth)</h2>
      <mat-form-field>
        <mat-label>Date of birth</mat-label>
        <input
          matInput
          [matDatepicker]="birthdayPicker"
          [(ngModel)]="birthday"
          #birthdayModel="ngModel"
          [max]="maxBirthday"
          required
        />
        <mat-datepicker-toggle matSuffix [for]="birthdayPicker" />
        <mat-datepicker #birthdayPicker startView="year" />
        @if (birthdayModel.hasError('required')) {
          <mat-error>Please choose a date.</mat-error>
        }
        @if (birthdayModel.hasError('matDatepickerMax')) {
          <mat-error>Please choose an earlier date.</mat-error>
        }
      </mat-form-field>
    </section>

    <section>
      <h2>Choose a date with touch UI (e.g. choose a payment date on mobile)</h2>
      <p>When would you like to schedule your payment?</p>
      <mat-form-field>
        <input
          matInput
          [matDatepicker]="paymentPicker"
          [(ngModel)]="paymentDate"
          #paymentDateModel="ngModel"
          [min]="minPaymentDate"
          required
          aria-label="Payment date"
        />
        <mat-datepicker-toggle matSuffix [for]="paymentPicker" />
        <mat-datepicker #paymentPicker />
        @if (paymentDateModel.hasError('required')) {
          <mat-error>Please choose a date.</mat-error>
        }
        @if (paymentDateModel.hasError('matDatepickerMin')) {
          <mat-error>Please choose a later date.</mat-error>
        }
      </mat-form-field>
    </section>

    <section>
      <h2>
        Choose date with startAt, min and max (e.g. schedule a departing and returning flight)
      </h2>
      <mat-form-field>
        <mat-label>Departure date</mat-label>
        <input
          matInput
          [matDatepicker]="departPicker"
          [(ngModel)]="departDate"
          #departDateModel="ngModel"
          [min]="minTripDate"
          [max]="maxTripDate"
          required
        />
        <mat-datepicker-toggle matSuffix [for]="departPicker" />
        <mat-datepicker #departPicker [startAt]="startTripDate" />
        @if (departDateModel.hasError('required')) {
          <mat-error>Please choose a date.</mat-error>
        }
        @if (departDateModel.hasError('matDatepickerMin')) {
          <mat-error>Please choose a later date.</mat-error>
        }
        @if (departDateModel.hasError('matDatepickerMax')) {
          <mat-error>Please choose an earlier date.</mat-error>
        }
      </mat-form-field>
      <mat-form-field>
        <mat-label>Return date</mat-label>
        <input
          matInput
          [matDatepicker]="returnPicker"
          [(ngModel)]="returnDate"
          #returnDateModel="ngModel"
          [min]="departDate || minTripDate"
          [max]="maxTripDate"
        />
        <mat-datepicker-toggle matSuffix [for]="returnPicker" />
        <mat-datepicker #returnPicker [startAt]="startTripDate" />
        @if (returnDateModel.hasError('matDatepickerMin') && !departDate) {
          <mat-error>Please choose a later date.</mat-error>
        }
        @if (returnDateModel.hasError('matDatepickerMin') && departDate) {
          <mat-error>Please choose a date after your departure.</mat-error>
        }
        @if (returnDateModel.hasError('matDatepickerMax')) {
          <mat-error>Please choose an earlier date.</mat-error>
        }
      </mat-form-field>
    </section>

    <section>
      <h2>Choose date with date filter (e.g. schedule a doctor's appointment)</h2>
      <mat-form-field>
        <mat-label>Appointment date</mat-label>
        <input
          matInput
          [matDatepicker]="appointmentPicker"
          [(ngModel)]="appointmentDate"
          #appointmentDateModel="ngModel"
          [min]="minAppointmentDate"
          [max]="maxAppointmentDate"
          [matDatepickerFilter]="weekdaysOnly"
          required
        />
        <mat-datepicker-toggle matSuffix [for]="appointmentPicker" />
        <mat-datepicker #appointmentPicker />
        @if (appointmentDateModel.hasError('required')) {
          <mat-error>Please choose a date.</mat-error>
        }
        @if (
          appointmentDateModel.hasError('matDatepickerMin') ||
          appointmentDateModel.hasError('matDatepickerMax') ||
          appointmentDateModel.hasError('matDatepickerFilter')
        ) {
          <mat-error>No appointments available on this date.</mat-error>
        }
      </mat-form-field>
    </section>
  </mat-card-content>
</mat-card>
